<template>
  <a @click="handleChange" type="text" :class="['sider-trigger-a', (collapsed ? 'collapsed' : ''), getTheme() ]">
    <Icon :type="icon" :size="size" :color="getColor()"/>
  </a>
</template>
<script>
export default {
  name: 'siderTrigger',
  props: {
    collapsed: Boolean,
    icon: {
      type: String,
      default: 'navicon-round'
    },
    size: {
      type: Number,
      default: 26
    },
     theme: {
        type: String,
        default: 'light',
      }
  },
  methods: {
    getTheme() {
        var key = this.theme;
        switch (key) {
          case 'light':
            return 'light'
            break;
          case 'dark':
            return 'dark'
            break;
          default:
            return ''
            break;
        }
      },
      getColor() {
        var key = this.theme;
        switch (key) {
          case 'light':
            return '#5c6b77'
            break;
          case 'dark':
            return '#ffffff'
            break;
          default:
            return ''
            break;
        }
      },
    handleChange () {
      this.$emit('on-change', !this.collapsed)
    }
  }
}
</script>
<style lang="less">
@import './sider-trigger.less';
</style>
